<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .out {
        padding: 50px;
        background-color: green;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>

  <body>
    <!-- 
    指令的语法

      v-xxx:yyy.zzz.ccc="aaa"

        v-xxx   指令名称
        yyy     指令参数
        zzz ccc 指令修饰符
        aaa     指令值

    事件修饰符
      .stop         阻止冒泡
      .prevent      阻止默认行为
      .self         确保触发事件元素与绑定事件元素为同一个时才生效
      .capture      将这个元素下的行为修改为捕获行为。
      .once         只绑定一次
      .passive      告诉浏览器我绝对不会阻止你的默认行为，一般用于滚动事件

   -->
    <div id="app">
      <div class="out" @click.self="handleOut">
        <div class="inner" @click="handleInner"></div>

        <a href="https://www.baidu.com" @click.prevent.stop.once="handleJump">去百度</a>

        <div class="inner"></div>
      </div>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        methods: {
          handleOut() {
            console.log("外部");
          },

          handleInner() {
            console.log("内部");
          },

          handleJump() {
            alert('jump')
          }
        },
      }).mount("#app");
    </script>
  </body>
</html>
